<template>
	<view class="mtb20 w100">
		<view class="right rowSpaceBetween mtb30">
			<view class="rowCenter " style="gap: 20rpx;">
				<view>
					<image src="/static/image/defultUser.png" mode="widthFix"></image>
				</view>
				<view class="rankName">
					{{items.name}}
				</view>
			</view>
			<view class="status" :class="statusFun(items.status).class">
				{{statusFun(items.status).value}}
			</view>
		</view> 
		<view class="" v-for="([key, item]) in Object.entries(infoList)" :key="key">
			<view class="rowSpaceBetween mtb30">
				<view class="">{{item}}</view>
				<view class="">{{items[key]}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		items: {
			type: Object,
			default: () => {}
		}
	})
	const infoList = {
		createTime: '申请时间',
		money: '应结金额',
		fee: '通道服务费',
		agent: '服务费承担'
	}
</script>
<style lang="scss">
	image {
		width: 80rpx;
		height: 80rpx;
	}

	.rankName {
		font-size: 32rpx;
	}

	.rankIndex {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		box-sizing: border-box;
		color: var(--themeFontColor9);
		background: var(--homePageBackground);
		font-size: 42rpx;
	}

	.ident {
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(#fb5f46, 0.2);
		color: var(--themeDefultFontColor);
	}
</style>